<!DOCTYPE html>
<div class="row createNewUser">
    <ba-card>
        <div class="col-sm-12 col-md-12">
            <div class="profileContent">
                <div class="row profileUpperContent">
                    <span *ngIf="showEdit" (click)="Modal.open();getProfileInfo()" class="profileEditpencil"><i
                            class="ion-edit"></i></span>

                    <div class="col-md-2 col-sm-4 col-xs-5 profileleftContainer">
                        <img class="profilePhoto" [src]="profileImageUser" />
                    </div>

                    <div class="col-md-10 col-sm-8 col-xs-7 profilerightContainer profiledata">
                        <div class="profileInfo" style="font-weight: bold; color: gray;">
                            {{profileName}}
                        </div>
                        <div class="profileInfo">
                            <p>{{profileEmail}}</p><br>
                            <p class="profileLocation">{{profileLocation}}<br>{{profileLocationCity}}<br>{{profileLocationCountry}}
                            </p>
                        </div>
                        <div class="profileInfo">
                            <!--<Span>Member Since: </Span>
                            <span class="profileLocation">{{profileDate}}</span>-->
                        </div>
                    </div>
                </div>
                <div class="row aboutme">
                    <blockquote *ngIf="aboutMe">{{aboutMe}}</blockquote>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <p class="activity">Activities Through beginning</p>
                    </div>
                    <div class="col-md-12">
                        <span class="lefttitle">My Ideas:</span>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="col-md-10">
                        <div class="profileActivities">
                            <br>
                            <div class="row">
                                <div class="col-md-3 col-sm-4 col-xs-3">
                                    <p class="profileCountno">{{profileIdeaCount}}</p>
                                </div>
                                <div class="col-md-1 col-sm-4 col-xs-2 top"><span class="profileCount"><i
                                        class="ion-ios-lightbulb"></i> </span></div>
                                <div class="col-md-8 col-sm-4 col-xs-7 top">

                                    <p class="profileCounttitle">Ideas Submitted</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3 col-sm-4 col-xs-3">
                                    <p class="profileCountno">{{profileLikesCount}} </p>
                                </div>
                                <div class="col-md-1 col-sm-4 col-xs-2 top"><span class="profileCount"><i
                                        class="ion-ios-timer"></i></span></div>
                                <div class="col-md-8 col-sm-4 col-xs-7 top">
                                    <p class="profileCounttitle">Votes Received</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3 col-sm-4 col-xs-3">
                                    <p class="profileCountno">{{commentsOnUsersIdea}} </p>
                                </div>
                                <div class="col-md-1 col-sm-4 col-xs-2 top"><span class="profileCount"><i
                                        class="ion-chatbox"></i></span></div>
                                <div class="col-md-8 col-sm-4 col-xs-7 top">
                                    <p class="profileCounttitle">Comments Received</p>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <span class="lefttitle">My Comments & Votes:</span>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="col-md-10">
                        <div class="profileActivities">
                            <br>
                            <div class="row">
                                <div class="col-md-3 col-sm-4 col-xs-3">
                                    <p class="profileCountno">{{profileCommentCount}}</p>
                                </div>
                                <div class="col-md-1 col-sm-4 col-xs-2 top"><span class="profileCount"><i
                                        class="ion-chatbox"></i></span></div>
                                <div class="col-md-8 col-sm-4 col-xs-7 top">
                                    <p class="profileCounttitle">Comments Submitted</p>
                                </div>


                            </div>

                            <div class="row">
                                <div class="col-md-3 col-sm-4 col-xs-3">
                                    <p class="profileCountno">{{profileVoteCount}}</p>
                                </div>
                                <div class="col-md-1 col-sm-4 col-xs-2 top"><span class="profileCount"><i
                                        class="ion-thumbsup"></i></span></div>
                                <div class="col-md-8 col-sm-4 col-xs-7 top">
                                    <p class="profileCounttitle">Votes Submitted
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="activityContent">
                <div class="col-md-12 activityTitle">
                    <p class="activityLog">Activity</p>
                </div>
                <div class="col-md-12 activityBody">
                    <div class="scrollable">
                        <div class="activityList" *ngFor="let activity of activities">
                            <table class="activityTable">
                                <tr>
                                    <th class="ActivityType text-left">
                                        <div class="dotdotdot">{{activity.activityType}} <span [ngClass]="{'cursorPointerProfille':cursorPointerProfille}" class="activityTitle" (click)="getfullIdea(activity.idea, activity.user)">{{activity.title}}.</span>
                                        </div>
                                    </th>
                                    <th class="ActivityCreatedAt text-right">{{activity.timeAgo}}</th>
                                </tr>
                            </table>
                        </div>
                        <div *ngIf="showActivity">
                            <div class="noCommentYet">No Activity Yet</div>
                        </div>
                        <br/>
                        <div *ngIf="activityCount>9" (click)="getMoreActivity(activities)" class="activityMore">See More
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ba-card>
</div>


<div class="editModelContainer">
    <modal #Modal>
        <modal-header>


            <div class="row">
                <div class="col-md-6">
                    <div class="profileEditImage editnewImg"><img [src]="profileImage" class="profilePhotoeditor"></div>

                </div>
                <div class="col-md-6 profileimgbuttons">

                    <div class="uploadprofilePhoto">
                        <label class="profileUploadbutton">Upload file</label>
                        <input class="profileUploadbuttonFile" [disabled]="fileUpload" accept="image/*" type="file" value="Upload file" (change)="fileChangeListener($event)">
                    </div>
                    <div class="uploadprofilePhoto">
                        <p class="profilephotoinfo" [ngClass]="{'profilephotoinformation':profilephotoinformation}">You Can upload Jpg file, Gif file and Png file (File size limit is 1Mb)</p>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="myProfileInfo">
                        <span class="profileInfotitle">My Profile Info</span>
                    </div>
                </div>
                <div class="col-md-8 myProfileInfoline">

                </div>
            </div>


            <form [formGroup]="form" (ngSubmit)="userUpdateProfile(form.value)" class="form-horizontal">

                <div class="row">
                    <div class="col-md-5">
                        <div class="profileEditTitleinfo formgroupvalidation">
                            <label class="profileEditTitlelabel">First name*</label>
                        </div>
                    </div>
                    <div class="col-md-7" [ngClass]="{'has-error': (!form.get('profileUserFirstName').valid && form.get('profileUserFirstName').touched), 'has-success': (form.get('profileUserFirstName').valid && form.get('profileUserFirstName').touched)}">
                        <div class="profileeditControls">
                            <input type="text" class="form-control profileeditTextbox" formControlName="profileUserFirstName">
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-5">
                        <div class="profileEditTitleinfo formgroupvalidation">
                            <label class="profileEditTitlelabel">Last name*</label>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="profileeditControls" [ngClass]="{'has-error': (!form.get('profileUserLastName').valid && form.get('profileUserLastName').touched), 'has-success': (form.get('profileUserLastName').valid && form.get('profileUserLastName').touched)}">
                            <input type="text" class="profileeditTextbox form-control" formControlName="profileUserLastName">
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-5">
                        <div class="profileEditTitleinfo">
                            <label class="profileEditTitlelabel">Address</label>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="profileeditControls">
                            <input type="text" class="profileeditTextbox form-control" formControlName="profileUserAddress">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-5">
                        <div class="profileEditTitleinfo">
                            <label class="profileEditTitlelabel">City</label>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="profileeditControls">
                            <input type="text" class="profileeditTextbox form-control" formControlName="profileUserCity">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-5">
                        <div class="profileEditTitleinfo">
                            <label class="profileEditTitlelabel">State or province</label>
                        </div>
                    </div>
                    <div class="col-md-7 ">
                        <div class="profileeditControls">
                            <input type="text" class="profileeditTextbox form-control" formControlName="profileUserState">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-5">
                        <div class="profileEditTitleinfo">
                            <label class="profileEditTitlelabel">Country</label>
                        </div>
                    </div>
                    <div class="col-md-7 ">
                        <div class="profileeditControls">
                            <select class="profileeditTextbox form-control" [value]="profileUserCountry" formControlName="profileUserCountry">
                                <option (click)="profileUserCountry=country" *ngFor="let country of countries">
                                    {{country.name}}
                                </option>

                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-5">
                        <div class="profileEditTitleinfo">
                            <label class="profileEditTitlelabel">About me</label>
                        </div>
                    </div>
                    <div class="col-md-7 ">
                        <div class="profileeditControls">
                            <textarea class="profileeditTextbox form-control AboutMetextarea" formControlName="profileUserAboutme"></textarea>
                        </div>
                    </div>
                </div>


                <div class="uploadprofilePhoto profileUploadSavebutton">
                    <input [disabled]="!form.valid" class="btn btn-default btn-auth lgn profileUploadbutton" type="submit" value="Save">
                </div>
            </form>
        </modal-header>
    </modal>
</div>

<div *ngIf="profileEditModal" class="profileEditModal">

    <div class="profileEditModal-modal-content">
        <span class="profileEditModalClose" (click)="profileEditModal=false"><i class="ion-close-round"></i></span>
        <div class="row">
            <div class="col-md-12 hideImage">
                <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
                <br>
                <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
            </div>
            <div class="col-md-12 profileImageUploadButtons">
                <button class="profileUploadbutton PhotoSave" (click)="profileImage=data.image;profileEditModal=false;saveCropImage()">Ok
                </button>
                <button class="profileUploadbutton PhotoSave" (click)="profileEditModal=false;profileEditModalClose();">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<div class="userAbuseModelAdmin">
    <modal #ViewDetailIdeaModel (onClose)="refreshActivity()">
        <modal-header>
            <viewCardIdeaDetail (notifyParent)="getNotificationModal($event);" (notifyIdeaParent)="notifyToRefresh();" #viewCardIdeaDetail [viewDetailIdea]="viewDetailIdea" (notifyParenttoProfile)="notifyParenttoProfileModal($event)"></viewCardIdeaDetail>
        </modal-header>
    </modal>
</div>
<div class="reportAbuse">
    <modal #abuseModal modalClass="abuse-popup">
        <modal-header>
            <abuse [idea]="abuseIdea" (notifyAbuseModal)="getNotificationAbuseModal($event)"></abuse>
        </modal-header>
    </modal>
</div>